<html>
    <head>
        <meta charset="utf-8">
        <title>使用</title>
    </head>

    <!-- jqury调用ajax方法： 
        格式：$.ajax({});
            参数：
                type:请求方式，默认为get，可选值：get、post、put、delete
                url:请求地址
                data:请求参数，默认为null，可选值：对象、字符串、数组
                dataType:返回的数据类型，默认为null，可选值：text、json、xml、html、script
                success:请求成功时调用的函数，默认为null，可选值：函数
                error:请求失败时调用的函数，默认为null，可选值：函数
                beforeSend:发送请求前调用的函数，默认为null，可选值：函数
                complete:请求完成时调用的函数，默认为null，可选值：函数
                async:是否异步，默认为true，可选值：true、false
                timeout:请求超时时间，默认为0，可选值：数字
                cache:是否缓存，默认为true，可选值：true、false
                contentType:请求头，默认为application/x-www-form-urlencoded，可选值：application/x-www-form-urlencoded、multipart/form-data、text/plain
                processData:是否处理数据，默认为true，可选值：true、false
                xhrFields:自定义请求头，默认为null，可选值：对象

    
    
    
    -->
    <body>
        <script src="jquery-3.7.1.min.js"></script>

        <button id="btn">点击发送</button>
        <button id="btn2">点击发送</button>

    </body>
    <script>

        $("#btn").click(function() {
            var $this = $(this);
            $this.prop("disabled", true); // 禁用按钮

            $.ajax({
                type: "get",
                url: "js/data.json",
                data: {
                    uname: "张三"
                },
                // dataType: "json",
                success: function(data) {
                    console.log(data);
                    // data = JSON.parse(data);

                    // 对结果进行 DOM 操作
                    var ul = $("<ul></ul>");
                    for (let i = 0; i < data.length; i++) {
                        var li = $("<li></li>").text(data[i].username);
                        ul.append(li);
                    }

                    $("body").append(ul);

                    $this.prop("disabled", false); // 重新启用按钮
                },
                error: function(xhr, status, error) {
                    console.error("请求失败:", status, error);
                    $this.prop("disabled", false); // 重新启用按钮
                }
            });
        });


        $("#btn2").click(() =>{
            $.get("js/data.json",{username:"张三"},(data)=>{
                console.log(data)
            })

            $.post("js/data.json",{username:"张三"},(data)=>{
                console.log(data)
            })

            $.getJSON("js/data.json",(data)=>{
                console.log(data)
            })
        } )
       

    </script>
</html>